<template>
	<div>
		<!-- 全局数据操作按钮 -->
		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent"></i>测试
			</button>
		</p>


		<!--模态框 -->
		<div>
			<save id="save-modal" :teacher="teacher"></save>
		</div>

		<div class="row">
			<div class="col-xs-12 col-sm-3 center" v-for="item in teachers" :key="item.id" >
				<div>
					<span class="profile-picture">
						<img :src="item.image || teacherDefaultImage" :title="item.intro" style="height: 250px;" class="editable img-responsive editable-click editable-empty" >
					</span>

					<div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
						<div class="inline position-relative">
							<a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
								<i class="ace-icon fa fa-circle light-red"></i>
								&nbsp;
								<span class="white">{{item.position}}</span>
							</a>
						</div>		
					</div>
					
					<div class="space-2"></div>
					
					<div  class="btn btn-link">
						<i class="ace-icon glyphicon glyphicon-user green"></i>
						{{item.name}}【{{item.nickname}}】
					</div>
					
					<div>
						<operation :teacher="item"></operation>				
					</div>
				</div>
				
				<hr>
			</div>
		</div>
		
		<hr>
		
		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
	import operation from '@/views/teacher/components/operation'
	import save from '@/views/teacher/components/save'
	import pagination from '@/views/components/pagination'
	export default {
		data() {
			return {
				teachers: [],
				teacher: {},
				teacherDefaultImage: '/image/讲师头像/头像1.jpg'
			}
		},
		components: {
			operation,
			pagination,
			save
		},
		mounted() {
			this.list(1)
		},
		methods: {
			list(page) {
				let param = {
					pageIndex: page,
					pageSize: this.$refs.pagination.size
				}
				let url = process.env.VUE_APP_SERVER + 'business/admin/teacher/list'
				this.$axios.post(url, param)
					.then(res => {
						console.log('teacher-list')
						let data = res.data.data
						this.teachers = data.list
						this.$refs.pagination.render(page, data.total)
					})
			},
			test() {
				console.log(process.env.NODE_ENV)
				this.$toast(process.env.VUE_APP_SERVER, this.$global.toast.success)
			},
			add() {
				this.teacher = {image: null}
				$('#save-modal').modal('show')
			}
		}
	}
</script>

<style scoped>
	.table {
		margin-bottom: 5px;
	}

	.paginations {
		text-align: right;
	}
</style>
